<template>
	<view class="diy-product" :style="{ background: itemData.style.background }">
		<view :class="['display__' + itemData.style.display]">
			<view class="product-list" :class="['column__' + itemData.style.column]">
				<template v-if="itemData.style.display == 'list'">
					<view class="product-item" v-for="(product, index) in itemData.data" :key="index">
						<goods-item-diy @chooseGoods="chooseGoods" :goods="product" :column="itemData?.style?.column" :showParams="itemData?.style?.show"></goods-item-diy>
					</view>
				</template>
				<template v-else>
					<u-scroll-list indicatorActiveColor="#e3230e">
						<view class="product-list-box main-flex">
							<view class="product-item" v-for="(product, index) in itemData.data" :key="index">
								<goods-item-diy @chooseGoods="chooseGoods" :goods="product" :column="itemData?.style?.column" :showParams="itemData?.style?.show"></goods-item-diy>
							</view>
						</view>
					</u-scroll-list>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {};
		},
		props: ['itemData'],
		emits: ['chooseGoods'],
		created() {},
		methods: {
			scroll(e) {},
			chooseGoods(e) {
				this.$emit('chooseGoods', e)
			}
		}
	};
</script>

<style scoped>
	.diy-product {
		margin-bottom: 20rpx;
		border-radius: 6rpx;
		flex-direction: column;
	}
</style>
